El resultado es conseguir que las imágenes sean mostradas en mayor tamaño con un click sin salir de la página. Me adelanté a decir de qué va el tema pero es igual veamos como añadirlo al blog y los resultados.
Nos situamos en plantilla Edicción de HTML y añadimos el script antes de </head>
<script type='text/javascript'>
var nW,nH,oH,oW;
function zoomToggle(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichImage){
oW=whichImage.style.width;oH=whichImage.style.height;
if((oW==iWideLarge)||(oH==iHighLarge)){
nW=iWideSmall;nH=iHighSmall;
}else{
nW=iWideLarge;nH=iHighLarge;
}
whichImage.style.width=nW;whichImage.style.height=nH;
}
</script>
var nW,nH,oH,oW;
function zoomToggle(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichImage){
oW=whichImage.style.width;oH=whichImage.style.height;
if((oW==iWideLarge)||(oH==iHighLarge)){
nW=iWideSmall;nH=iHighSmall;
}else{
nW=iWideLarge;nH=iHighLarge;
}
whichImage.style.width=nW;whichImage.style.height=nH;
}
</script>
Una vez añadido ya podemos hacer uso de él en cualquier imagen, para ello bastará con añadir lo siguiente:
<img src="url_de_imagen" width="ancho1" height="alto1" onclick="zoomToggle('ancho1px','alto1px','ancho2px','alto2px',this);">
 |  |
Sustituimos ancho1px y alto1px por el tamaño de la imagen a mostrar inicialmente, donde ancho2px y alto2px es el tamaño de la imagen al hacer clic sobre ella.
Según J.Miur es recomendable que los atributos (width="ancho1" height="alto1") tengan el mismo valor que los de la función (ancho1px','alto1px) pero no interfiere en nada si no es así.
Ver entrada original en Vagabundia
Darte las gracias por contestar a la pregunta del post anterior y decirte que lo que conseguido mezclando tu plantilla con una dirección que tenia anterior, de todas formas muchas gracias.
;-)
¡Hola!
Me gustaría saber si hay alguna forma de programar el editor de entradas de Blogger: Por ejemplo que te salga un espacio para escribir la fuente y el link de ella en otro, y que luego aparezca centrado, elegir para colcoar solo una imagen que yo quiera y añada... en fin, cambiar el típico !Título y cuerpo.
De nada Pedrulo me alegra que lo resolvieras ;)
Hola Silver en la plantilla de entrada lo que añadimos sale automáticamente en el editor cada vez que editas una nueva entrada.
Es como si almacenara unos datos códigos, imagen ect... puedes ver algo sobre ese tema aquí si no fuera eso me dices algo ;)
Gracias por la info, te espero por mi blog!!
Gracias a ti Emiliano ;)
Que tal Gem@, he probado el efecto, pero no funciona en mi blog de pruebaao.blogspot.com, no se si es que hago mal la entrada... soy muy nuevo en esto aún. Si pudieras orientarme sería de mucha ayuda.
Antonio
Anónimo cuando queremos ampliar una imagen hay que copiar el código de:
<img src="url_de_imagen" width="ancho1" height="alto1" onclick="zoomToggle('ancho1px','alto1px','ancho2px','alto2px',this);">
nada más que eso, y a ese código hay que añadirle la url de la imagen, y las medidas al mostrar la imagen en el blog y al ampliarla.
En tu blog se ve que hay un código para ampliar la imagen y después una imagen subida en la misma entrada con el editor de Blogger.
Tienes la imagen que subiste y este código:
<img height="50" onclick="zoomToggle('50px','50px','100px','100px',this);" src="url-de-tu-imagen; width="50" />
Lo primero de todo que la imagen que deseas ampliar es demasiado grande, es un fondo de pantalla que ocupa más espacio que el blog, la url es de Picasa y al no funcionar el código nos abre la imagen en la página de Picasa.
Lo que hacemos es lo siguiente, añades este código:
<img src="http://4.bp.blogspot.co /_q4j3j-JA2ro/SQj50f1IYMI/AAAAAAAAFxU/ijKjMwTiV_o/s400-R/amigos.jpg" width="50" height="50" onclick="zoomToggle('50px','50px','100px','100px',this);">
La url de la imagen es lo que tienes que sustituir por la tuya pero que no sea tan grande la imagen y sería mucho mejor alojarla en Blogger es decir la subes a una entrada (aunque luego la dejes en borrador) copias la url y la pegas en este código que puse.
Luego modificas las medidas:
ancho1px y alto1px están con un valor de 50px es el tamaño que vemos en miniatura.
Después ancho2px y alto2px esta en 100px es el tamaño de la imagen ampliada.
En el código verás que el ancho1 y alto1 se repite para asignárselo a width y height es conveniente que pongamos el mismo valor que en la imagen que se muestra en miniatura pero si pusiéramos otro no entorpece la ampliación.
Si copias este código y lo pegas en una entrada puedes ir probando hasta ir manejando un poco las medidas y cualquier cosa me lo dices que probemos ;)
Muy buen aporte, sois unos cracks!!!
Feliz Castañada para todos! :D
Muchísimas gracias GEM@, la explicación esta clarísima. Gracias por tu tiempo.
Gracias Sisco en realidad el mérito es de J.Miur ;)
Charo jajaja que es ¿castañada?
Gracias a ti anónimo :)
Si por eso lo he puesto en plural, pero yo lo he descubierto en tu blog.
Gema la castañada se celebra en cataluña la noche de todos los santos o sea hoy.
Gracias por la aclaración Sisco desconocía esa tradicción voy a buscar en Google que todo lo sabe :)
Hola Gema, he leido el artículo sobre ampliar imagenes con un click, pero como se hace para ampliar imagenes al pasar por encima de ellas sin hacer click?
Lo vi en este blog de cine, nada más abrirlo tiene una columna con imagenes que se hacen grandes al pasar por encima
http://sinpelosenlalengua-cine.blogspot.com/
Gracias de antemano.
Hola Iradai puedes seguir los pasos del siguiente enlace, si lo añades tal y como viene explicado el efecto será como el del ejemplo que dejaste.
Mira aquíaquí
En la parte de la CSS es posible añadir otro tiempo de borde o color, también eliminarlo como hice yo para el ejemplo ;)
Hola Gema, añadi lo de la plantilla y no me dio error. Pero a la hora de poner el codigo html en la entrada, no se me ven las imagenes, en la vista previa se me ven un cuadrado grande y otro pequeño con una cruz roja, no sé que he hecho mal?
Espero tu ayuda
¿Y en REDACTAR tampoco se ven las imágenes? si no se ven mira si añadiste bien la url de la imagen, ya sabes que una es la miniatura y la otra en su tamaño real.
bueno es super fino esta pagina es lo mejor saludos a todos mis amigos chaito
Me alegra que te guste Crisbel :)
yo consigo que se me abra pero luego si vuelvo a hacer click no se vuelve a reducir, ¿xq?
Danieson tendría que verlo online para ver por qué no funciona correctamente ;)
Si lo añades me comentas que lo vea.
Gema, hace tiempo que Blogger no ajusta las imágenes a lo que le pides. Si quieres poner una imagen original de 400px, por ejemplo, y reducirla a 200, sigue dejándola de 400, y si la pones de 400px y el original tiene más, ¡me la corta por el lado!, así de simple :(
¿Alguna idea para arreglarlo?
Otra cosa: en tu nube de etiquetas tienes las imágenes bajo el tag "fotos"... creo que es más que eso...
Un beso, a ver si me puedes dar una idea
yz Saludos AleMamá :) no me han comentado nada sobre ese problema pero puedes intentar acceder a Blogger por http://draft.blogger.com/ el tamaño de las imágenes lo adaptas cuando ya está añadida a la entrada y puedes arrastrarla hasta cubicarla donde deseas.
De todas formas mira aquí te dará una idea de como añadirlas en su tamaño original.
Sobre la etiqueta tienes toda la razón debo separar imágenes de fotos, ha sido un error por mi parte con la idea de añadir el menor número de etiquetas. Veremos de donde saco un tiempito y lo ordeno ;)
Besos amiga...
Gracia...¡grande, Gema!
yz Espero que te sea útil AleMamá :)
¡Abrazos!
Gema, renuncio...he redactado tres comentarios y no me publica ninguno...:((
Igual, gracias
yz AleMamá utiliza el antiguo editor (el enlace está justo debajo del formulario)
Gema me gustaría saber como hago para que todas las imágenes de la entrada del blog se puedan ampliar sin la necesidad de colocar la url de la imagen. Gracias
olas , muy bueno pero lo que yo busco es que aparezca como un boton que diga ampliar imagen y luego diga reducir esta imagen, sabes como?
Ejemplo :
http://www.comunidadptc.com/t12353-myprofitbux-regala-premium-para-500-miembros-040-minimo-de-pago
Nota: solo los miembros de este blog pueden publicar comentarios.